<template>
  <div class="main_wrap">
    <Left></Left>
    <Centers></Centers>
    <Right></Right>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "Main",
});
</script>
<script setup>
import Left from "./module/left/index.vue";
import Centers from "./module/center/index.vue";
import Right from "./module/right/index.vue";
</script>

<style lang="scss" scoped>
.main_wrap {
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
  // width: 100vw;
  height: 90.7vh;
  // border: 1px solid red;
  padding: 0px 10px 10px 10px;

  .left_wrap {
    width: 510px;
    // border: 1px solid red;
  }

  .center_wrap {
    width: 860px;
    // border: 1px solid red;
    // background-color: rgba(255, 255, 255, 0.2);
  }

  .right_wrap {
    width: 510px;
    // border: 1px solid red;
  }
}
</style>
